<script setup>
import {ref,computed} from 'vue';
import {get, post, timestampToDate} from '../js/http.js'
import pagination from '../components/pagination.vue'
import icon from '../components/icon.vue'
import pageHead from '../components/pagehead.vue'
import nodata from '../components/nodata.vue'
import read from '../components/read.vue'
const resultData = ref([])
const indexInfo = ref([])
const largeTxt = ref("")
const searchParam = ref({
  "name": "",
  "type": "SELECT",
  "field": "*",
  "page": 1,
  "pageSize": 10,
  "orders": [],
  "nodes": [],
  "totalPage": 0,
})
const node = ref({
  "values":[],
  "field":"",
  "operator":"EQ",
  "link":"AND"
})

async function search() {
  let url = "/admin/search/wrapper";
  searchParam.value.nodes = []
  if(node.value.field){
    searchParam.value.nodes.push(node.value)
  }
  post(url, searchParam.value).then(res => {
    searchParam.value.totalPage = res.result.totalPage
    resultData.value = res.result.list
  }).catch(error => console.log(error))
}
function handleConn(e){
  if (e.target.selectedIndex == 0) {
    searchParam.value.name =""
  }
  node.value =  {"values":[],"field":"","operator":"EQ", "link":"AND"}
  searchParam.value.page =1
  searchParam.value.totalPage =0
  resultData.value = []
  search();
}

const currentIndex = computed(() => {
   if(!searchParam.value.name || searchParam.value.name==""){
     return null
   }
   else{
     return indexInfo.value.find(item => item.name == searchParam.value.name)
   }
})

function changeHandler(page) {
  if (page <= 1) {
    page = 1;
  }
  if (page > searchParam.value.totalPage) {
    page = searchParam.value.totalPage;
  }
  searchParam.value.page = page;
  search();
}
function isValidHttpUrl(string) {
  if(!string){
    return false;
  }
  try {
    const newUrl = new URL(string);
    return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
  } catch (err) {
    return false;
  }
}

function isLargeText(text) {
  if(!text){
    return false;
  }
  return text.length > 200;
}
function readMore(text) {
   largeTxt.value = text;
}
async function getSearchConfig() {
  let url = "/admin/setting/getRuntimeConfig";
  get(url).then(res => {
    indexInfo.value = res.result
  })
}

getSearchConfig();
</script>
<template>
  <div class="container">
    <pageHead title="数据浏览" iconName="layers">
    <div class="field is-grouped is-grouped-multiline">
      <p class="control">
          <span class="select">
               <select v-model="searchParam.pageSize">
                 <option value="10">每页显示</option>
                 <option value="10">10</option>
                 <option value="20">20</option>
                 <option value="50">50</option>
               </select>
          </span>
      </p>

      <p class="control">
          <span class="select">
               <select v-model="searchParam.name" @change="handleConn">
                 <option>选择索引</option>
                 <option v-for="item in indexInfo">{{ item.name }}</option>
               </select>
          </span>
      </p>
      <p class="control">
          <span class="select">
               <select v-model="node.field" style="max-width: 150px">
                 <option value="">选择字段</option>
                 <option v-for="item in currentIndex.fieldsConfig" v-if="currentIndex">{{ item.fieldName }}</option>
               </select>
          </span>
      </p>
      <p class="control">
          <span class="select">
               <select v-model="node.operator">
                 <option value="">选择条件</option>
                 <option value="EQ">等于</option>
                 <option value="GT">大于</option>
                 <option value="LT">小于</option>
                 <option value="NE">不等于</option>
                 <option value="LIKE">Like</option>
                 <option value="Fuzzy">Fuzzy</option>
                 <option value="Parser">Parser</option>
               </select>
          </span>
      </p>

      <p class="control">
          <input v-model="node.values[0]" class="input is-link" placeholder="输入查询值" type="text">
      </p>
      <p class="control">
        <button class="button is-link is-outlined" @click="search()"><icon icon="search" class="is-link mr-1" />搜索</button>
      </p>
    </div>
  </pageHead>
    <!--数据区-->
    <nodata  v-if="!resultData || resultData.length==0 || !currentIndex" ></nodata>
    <div v-else style="display: block;overflow-x: scroll;">
      <table class="table is-fullwidth table-container" >
        <thead>
        <tr>
          <th v-for="item in currentIndex.fieldsConfig" class="ellipsis" :title="item.fieldName">{{item.fieldName}}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,itemIndex) in  resultData">
          <td class="ellipsis" v-for="(itemField,itemIndex) in  currentIndex.fieldsConfig"   :title="item[itemField.fieldName]">
            <a v-if="isValidHttpUrl(item[itemField.fieldName])" :href="item[itemField.fieldName]" target="_blank"> {{item[itemField.fieldName]}} </a>
            <span v-else-if="isLargeText(item[itemField.fieldName])" style="cursor: pointer" @click="readMore(item[itemField.fieldName])">{{item[itemField.fieldName]}}</span>
            <span v-else>{{ item[itemField.fieldName] ? item[itemField.fieldName] : "-" }}</span>
          </td>
        </tr>
        </tbody>
      </table>

    </div>
    <pagination
        class="mt-3"
        :current-page="searchParam.page"
        :total-pages="searchParam.totalPage"
        @pageRefresh="search"
        @pageChange="changeHandler">
    </pagination>

    <!--数据区结束-->
  </div>
  <read :text="largeTxt" v-if="largeTxt && largeTxt.length > 0" :keyWord="node.values[0]"  @close="largeTxt=''"/>
</template>
<style scoped>
.ellipsis{
  max-width: 120px; /* 设置单元格最大宽度 */
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 文本超出部分显示省略号 */
  position: relative; /* 为tooltip定位做准备 */
}
/* Tooltip样式 */
.tooltip {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -75px;
}

.tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

/* 鼠标悬停时显示tooltip */
.ellipsis:hover .tooltip {
  visibility: visible;
}
.table-container {
  width: 100% !important;; /* 设置表格容器的宽度 */
  overflow-x: auto !important;;
}
table {
  width: 100% !important;
}


</style>
